<div class="container">
  <div class="container0 container-item" [style.visibility]="step==0?'visible':'hidden'">
    <app-recommend-record (assessment)="assessment($event)"></app-recommend-record>
  </div>

  <div class="container1 container-item" [style.visibility]="step==1?'visible':'hidden'">
    <app-com-step-a #comstep01></app-com-step-a>
  </div>

  <div class="container2 container-item" [style.visibility]="step==2?'visible':'hidden'">
    <app-com-step-b #comstep02></app-com-step-b>
  </div>

  <div class="container3 container-item" [style.visibility]="step==3?'visible':'hidden'">
    <app-com-step-c #comstep03></app-com-step-c>
  </div>

  <div class="container4 container-item" [style.visibility]="step==4?'visible':'hidden'">
    <app-com-step-d #comstep04></app-com-step-d>
  </div>

  <div class="container5 container-item" [style.visibility]="step==5?'visible':'hidden'">
    <app-com-step-e #comstep05></app-com-step-e>
  </div>

  <div class="container6 container-item" [style.visibility]="step==6?'visible':'hidden'">
    <app-calc-result [data]="resultData"></app-calc-result>
  </div>

  <div class="btns" *ngIf="step>0">
    <button class="btn" [disabled]="disableBefore" nz-button nzType="primary" (click)="before()">上一步</button>
    <button class="btn" [disabled]="disableNext" nz-button nzType="primary" (click)="next()">
      <span *ngIf="step < 5">下一步</span>
      <span *ngIf="step == 5">计算</span>
    </button>
  </div>

</div>
